<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人信息修改</title>
    <link rel="stylesheet" href="/static/css/hui.css">
    <style>
        .portrait {
            height: 80px;
            width: 80px;
            margin: 0 auto;
            border-radius: 50%;
            position: relative;
        }

        .portrait>input {
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            top: 0;
            left: 0;

        }

        .portrait>img {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <header class="hui-header">
        <div id="hui-back"></div>
        <h1>个人信息&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h1>
    </header>

    <div class="hui-wrap">
        <form style="padding:28px 10px;" class="hui-form" id="form1" enctype="multipart/form-data">
            <div class="portrait">
                <img id="portraitShow" src="{{user_image}}">
                <input id="uploaderPic" name="uploaderPic" type="file" accept="image/*" multiple="">
            </div>
            <a href="javascript:void(0);">
                <div class="hui-list-text">
                    <div class="hui-list-text-content">
                        账号：
                    </div>
                    <div class="hui-list-info">
                        <span id="account">{{account}}</span>
                        <span class="hui-icons hui-icons-right"></span>
                    </div>
                </div>
            </a>
            <a href="javascript:void(0)" id="setNickname">
                <div class="hui-list-text">
                    <div class="hui-list-text-content">
                        昵称：
                    </div>
                    <div class="hui-list-info">
                        <span id="nickName">{{nickname}}</span>
                        <span class="hui-icons hui-icons-right"></span>
                    </div>
                </div>
            </a>
            <a href="/setPW/" id="setPW">
                <div class="hui-list-text">
                    <div class="hui-list-text-content">
                        修改密码：
                    </div>
                    <div class="hui-list-info">
                        <span>******</span>
                        <span class="hui-icons hui-icons-right"></span>
                    </div>
                </div>
            </a>
            <div style="padding:15px 8px;">
                <button type="button" onclick="history.back(-1)" class="hui-button hui-button-large hui-danger">返回</button>
            </div>
        </form>

    </div>
    <script type="text/javascript" src="/static/js/jquery-2.1.4.js"></script>
    <script src="/static/js/hui.js"></script>

    <script>
        // 头像预览
        var pic;
        $('#uploaderPic').change(function () {
            $("#portraitShow").attr("src", URL.createObjectURL($(this)[0].files[0]));
            pic = $(this)[0].files[0];
            var formData = new FormData()
            formData.append('pic', pic);
            //修改头像 post
            $.ajax({
                url: '127.0.0.1:5000/setPic/',
                data: formData,
                type: 'POST',
                cache: false,
                dataType: 'json',

                //必须false才会避开jQuery对 formdata 的默认处理 
                // XMLHttpRequest会对 formdata 进行正确的处理
                processData: false,
                //必须false才会自动加上正确的Content-Type 
                contentType: false,

                xhrFields: {
                    withCredentials: true
                },
                beforeSend: function () { hui.loading(); },
                complete: function () { hui.closeLoading(); },
                success: function (data) {
                    var needRefresh = sessionStorage.getItem("need-refresh");
                    if (needRefresh) {
                        sessionStorage.removeItem("need-refresh");
                        location.reload();
                    }
                }
            });
        })

        hui('#setNickname').click(function () {
            var nickname = $('#nickName').text();
            hui.prompt('请输入您的称呼？', ['取消', '确定'], function (name) {
                // 昵称判断
                var reg = /^[a-zA-Z]([a-zA-Z0-9]{2,6})$/
                if (reg.test(name)) {
                    //修改昵称 post
                    hui.postJSON(
                        'http://127.0.0.1:5000/setNickname/',
                        { nickname: name },
                        function (res) {
                            $('#nickName').text(name)
                            hui.iconToast(res.message, 'success');
                        },
                        function (e) {
                            hui.iconToast('读取消息失败', 'warn');

                        }
                    );


                }
                else {
                    hui.toast('昵称应为2-6个字母数字,字母开头');
                }
            }, '昵称应为2-6个字母数字,字母开头', nickname, function () { console.log('您点击了取消') });
        });


        hui('#setPW').click(function(){
            
        })


    </script>
</body>

</html>